<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form name="login">
		<h1>用户登录</h1>
		用户名：<input type=text name='username' id="username"> <br>
		密码：<input type=password name='password' id="password"> <br>
		<input type="button" name="cmdOK" onclick="loginPost()" value="提  交"> &nbsp; 
		<input type="reset" name="cmdCancel" value="重  置">
	</form>
	
	<script type="text/javascript">
		function loginPost(){
			var username=document.getElementById("username").value;
			var password=document.getElementById("password").value;
			//创建异步对象  
			var xhr = new XMLHttpRequest();
			//设置请求的类型及url
			//post请求一定要添加请求头才行不然会报错
			xhr.open('post', '/submit' );
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//发送请求
			xhr.send("username="+username+"&password="+password);
			xhr.onreadystatechange = function () {
			    // 这步为判断服务器是否正确响应
			  if (xhr.readyState == 4 && xhr.status == 200) {
				  console.log(xhr.responseText);
			  } 
			};
		}
	</script>
	
</body>
</html>